<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <div class="flex items-center justify-center w-full
                bg-gradient-to-b from-blue-400 to-green-200 h-screen"
    >
      <div class="overflow-auto h-screen w-screen flex items-center justify-center">
        <div class="max-w-lg mx-auto">
          <div class="w-full flex justify-center mb-2 mt-2">
            <img style="box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);border-radius: 50%;width: 150px;" src="../../../public/logo.png">
          </div>
          <div class="text-4xl mb-2 w-full text-center title">欢迎使用康复诊疗排班系统</div>
          <div class="text-sm mb-6 w-full text-center subtitle">Welcome to use Medical System</div>

          <n-input v-model:value="identity" type="text" size="large" placeholder="请输入身份证号" />
          <n-input v-if="type === 'REGISTER'" v-model:value="name" class="mt-3" size="large" placeholder="请输入真实姓名" />
          <n-input v-if="type === 'REGISTER'" v-model:value="phone" class="mt-3" size="large" placeholder="请输入手机号" />
          <n-input v-model:value="password" class="mt-3" type="password" size="large" placeholder="请输入密码"
                   @keyup.enter="confirm"
          />
          <n-input v-if="type === 'REGISTER'" v-model:value="confirmPassword" type="password" class="mt-3" size="large"
                   placeholder="请再次输入密码"
          />
          <div class="text-sm mt-7 w-full flex justify-between cursor-pointer hover:underline font-mono">
            <div v-if="type === 'LOGIN'" @click="type = 'REGISTER'">没有账号？点此注册</div>
            <div v-else @click="type = 'LOGIN'">返回登录</div>
          </div>
          <n-button class="mt-3 mb-8 w-full" type="primary" size="large" @click="confirm">
            {{ type === 'LOGIN' ? '立即登录' : '马上注册' }}
          </n-button>
        </div>
      </div>
    </div>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NInput, NConfigProvider, NButton } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { RegisterData, reqLogin, reqRegister, reqTest } from './user.def'
import { axiosReq } from '../../shared/client/axios'
import { actErr, actOK } from '../../shared/client/interact'
import { setToken ,setRole } from '../../shared/client/window'

const identity = ref('')
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const name = ref('')
const type = ref<'LOGIN' | 'REGISTER'>('LOGIN')
// 11010519800101001X
// password123
// 441881202405311949
// 123456
async function confirm() {
  if (!identity.value) {
    actErr('请输入身份证号')
    return
  } else if (!password.value) {
    actErr('请输入密码')
    return
  }
  if(identity.value.length != 18) {
    actErr('身份证号格式不正确')
    return
  }
  if (type.value === 'REGISTER') {
    if (!name.value) {
      actErr('请输入姓名')
      return
    } else if (!phone.value) {
      actErr('请输入手机号')
      return
    } else if (!confirmPassword.value) {
      actErr('请输入第二次密码')
      return
    } else if (confirmPassword.value != password.value) {
      actErr('两次输入密码需要一致')
      return
    }
  }

  let res: any = null
  if (type.value === 'LOGIN') {
    res = await reqLogin(axiosReq, identity.value, password.value)
  } else {
    const registerData:RegisterData = {
      cardId: identity.value,
      name: name.value,
      password: password.value,
      phone: phone.value
    }
    res = await reqRegister(axiosReq, registerData)
  }

  if (res.code === 500) {
    actErr(res.message)
    return
  } else if (res.code === 200) {
    setToken(res.data.token)
    setRole(res.data.role)
    actOK('登录成功')
    if(res.data.role === 'Patient')
      nav('/patient/')
    else if(res.data.role === 'Doctor')
      nav('/doctor/')
  }
}



</script>

<style scoped>
.title{
  font-family: cursive;
  font-weight: bolder;
}
.subtitle{
  font-family:serif;
  font-weight: bold;
}
</style>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 滚动条轨道样式 */
:root {
  --scrollbar-bg: rgb(1 2 3 / 40%);
}

::-webkit-scrollbar {
  z-index: 999;
  width: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(1 2 3 / 50%);
}
</style>